<template>
	<view class="status_bar">
		<uni-nav-bar left-icon="left" :right-text="allStatesAreTrue ? '取消':'全选'" title="扫码" @clickRight='chang' />
		<view class="scanCode">
			<div class="scanCode_main_">
				<div class="scanCode_main" v-for="(v,i) in data" :key="i">
					<div class="scanCode_main_top">
						{{v.categoryName}}
					</div>
					<div class="scanCode_main_cen">
						<div>重量 : {{v.weight}}斤</div>
						<div>回收金额 : ￥{{v.amount}}</div>
					</div>
					<div class="scanCode_choice">
						<checkbox-group @change='handleChange(i)'>
							<checkbox value="cb" :checked="v.state" activeBackgroundColor='#007aff' iconColor='#fff' />
						</checkbox-group>
					</div>
				</div>
			</div>
		</view>
		<div class="scanCode_button">
			<button @click="shaoma">扫码</button>
			<button @click="zhifu">支付</button>
		</div>
		<bottom-tab url='/pages/index/scanCode'></bottom-tab>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
				list: [],
				pageSize: '10',
				pageNum: '1',
			}
		},
		computed: {
			quan() {
				return this.data.every(item => item.state === true)
			},
			allStatesAreTrue() {
				return this.data.every(item => item.state === true);
			}
		},
		methods: {
			zhifu() {
				if (this.list.length === 0) {
					this.$api.msg('请选择数据进行支付')
				} else {
					uni.navigateTo({
						url: '../index/paymentand?id=' + this.list
					})
				}
			},
			chang() {
				// this.allStatesAreTrue = this.data.every(item => item.state === true);
				if (this.allStatesAreTrue) {
					this.data.forEach((v) => {
						v.state = false
						this.list = []
					})
				} else {
					this.list = []
					this.data.forEach((v) => {
						v.state = true
						if (!this.list.includes(v)) {
							this.list.push(v)
						}
					})
					console.log(this.list,'-》1234');
				}

			},
			handleChange(index) {
				const item = this.data[index];
				console.log(item.id);
				this.$set(item, 'state', !item.state);

				if (item.state) {
					if (!this.list.includes(item)) {
						this.list.push(item.id);
						console.log('添加后的数据', this.list);
					}
				} else {
					const listIndex = this.list.indexOf(item);
					if (listIndex !== -1) {
						this.list.splice(listIndex, 1);
						console.log('删除后的数据', this.list);
					}
				}
			},
			initial() {
				this.$ajax('get', 'recovery/code_order/list', {
					pageSize: this.pageSize,
					phonenumber: this.pageNum,
					status: 1
				}).then((res) => {
					if (res.code == 200) {
						this.data = res.rows
					} else {
						this.$api.msg(res.msg)
					}
				})
			},
			shaoma() {
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						// console.log(res);
						// console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						const idParam = res.result.split('?id=')[1]; // 使用?id=分割字符串，并取第二部分  
						console.log(idParam); // 输出：1770434224964771840
						uni.navigateTo({
							url: `/pages/index/new_file?id=${idParam}`,
						})
					},
					fail: function(res) {
						this.$api.msg(res)
					}
				});

			}
		},
		onLoad() {
			this.initial()
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx;
	}

	.scanCode {
		padding: 0 20px;
	}

	.scanCode_main_ {
		/* margin-top: 60px; */
	}

	.scanCode_main {
		background-color: #fff;
		padding: 15px;
		border-radius: 10px;
		margin-top: 20px;
		box-shadow: 0px 0px 10px 1px #e2e5f1;
		position: relative;
	}

	.scanCode_main_top {
		display: flex;
		color: #1c344d;
		font-weight: 700;
	}

	.scanCode_main_top_1 {
		font-size: 12px;
		padding: 3px 5px;
		color: #f9b26d;
		border-radius: 3px;
		background-color: #fef0de;
		margin-left: 15px;
	}

	.scanCode_main_cen {
		display: flex;
		margin: 10px 0;
		color: #a7a7a7;
		font-size: 14px
	}

	.scanCode_main_cen>div:nth-child(1) {
		padding-right: 10px;
	}

	.scanCode_main_cen>div:nth-child(2) {
		padding: 0 10px;
		border-right: 2px solid #dfdfdf;
		border-left: 2px solid #dfdfdf;
	}

	.scanCode_main_cen>div:nth-child(3) {
		padding-left: 10px;
	}

	.scanCode_main_bottom {
		display: flex;
		font-weight: 700;
		color: #fe4f47;
		display: flex;
		align-items: center;
	}

	.scanCode_main_bottom>div {
		font-size: 12px;
		color: #aaaaaa;
		padding-left: 5px;
	}

	.scanCode_choice {
		position: absolute;
		top: 10px;
		right: 10px;
	}

	.scanCode_button {
		position: fixed;
		bottom: 90px;
		width: 100%;
		display: flex;
		left: 0;
	}

	.scanCode_button>button {
		width: 130px;
		border-radius: 30px;
		border: none;
		color: #fff;
	}

	.scanCode_button>button:nth-child(1) {
		background-image: linear-gradient(to right, #2b74fc, #2672fe);
	}

	.scanCode_button>button:nth-child(2) {
		background-image: linear-gradient(to right, #ffa09f, #ff5f5e);
	}

	::v-deep .uni-checkbox-input {
		border-radius: 50%;
	}
</style>